import React from "react";
import type { FormProps } from "antd";
import { Button, Card, Checkbox, Form, Input } from "antd";

type FieldType = {
  username: string;
  password: string;
  remember?: string;
};
import { UserOutlined, LockOutlined } from "@ant-design/icons";

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const App: React.FC<any> = (props) => {
  const onFinish: FormProps<any>["onFinish"] = (values) => {
    localStorage.setItem("token", values);
    props.history.push("/admin/home")
  };
  return (
    <Card
      style={{ width: "500px", margin: "15rem auto" }}
      title="YSHOP后端管理系统2.3"
    >
      <Form onFinish={onFinish}>
        <Form.Item<FieldType>
          name="username"
          rules={[{ required: true, message: "账号不能为空!" }]}
        >
          <Input prefix={<UserOutlined />} />
        </Form.Item>

        <Form.Item<FieldType>
          name="password"
          rules={[{ required: true, message: "密码不能为空!" }]}
        >
          <Input.Password prefix={<LockOutlined />} />
        </Form.Item>

        <Form.Item<FieldType>
          name="remember"
          valuePropName="checked"
          label={null}
        >
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default App;
